<template>
  <div class="main-wrap">
    <!-- <div v-if="goodList.length>0"> -->
    <van-tabs :active="active" bind:change="onChange" @click="changeList" :sticky="true" :scroll-top="scrollTop" @change="activeChange">
      <van-tab title="综合">
        <ul class="goodsList" v-if="goodList.length>0">
          <li class="goods" v-for="(item,index) in goodList" :key="index">
            <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
              <div class="pic">
                <img :src="item.image" alt="">
              </div>
              <div class="msg">
                <p class="scrip">{{item.goods_name}}</p>
                <span class="goodsPrice">￥{{item.sell_price}}</span>
                <span class="popular"><img src="/static/img/fire.png"><span>{{item.popularity}}</span></span>
              </div>
            </a>
          </li>
        </ul>
        <div v-else class="foundNot">
          <div v-if="loading">
            <img src="/static/img/notFound.png" alt="">
          </div>
        </div>
      </van-tab>
      <van-tab title="人气">
        <ul class="goodsList" v-if="goodList.length>0">
          <li class="goods" v-for="(item,index) in goodList" :key="index">
            <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
              <div class="pic">
                <img :src="item.image" alt="">
              </div>
              <div class="msg">
                <p class="scrip">{{item.goods_name}}</p>
                <span class="goodsPrice">￥{{item.sell_price}}</span>
                <span class="popular"><img src="/static/img/fire.png"><span>{{item.popularity}}</span></span>
              </div>
            </a>
          </li>
        </ul>
        <div v-else class="foundNot">
          <div v-if="loading">
            <img src="/static/img/notFound.png" alt="">
          </div>
        </div>
      </van-tab>
      <van-tab title="价格排序" @click="priceList">
        <ul class="goodsList" v-if="goodList.length>0">
          <li class="goods" v-for="(item,index) in goodList" :key="index">
            <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
              <div class="pic">
                <img :src="item.image" alt="">
              </div>
              <div class="msg">
                <p class="scrip">{{item.goods_name}}</p>
                <span class="goodsPrice">￥{{item.sell_price}}</span>
                <span class="popular"><img src="/static/img/fire.png"><span>{{item.popularity}}</span></span>
              </div>
            </a>
          </li>
        </ul>
        <div v-else class="foundNot">
          <div v-if="loading">
            <img src="/static/img/notFound.png" alt="">
          </div>
        </div>
      </van-tab>
      <!--<van-tab title="价格升序">
          <ul class="goodsList" v-if="goodList.length>0">
              <li class="goods" v-for="(item,index) in goodList" :key="index">
                  <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
                  <div class="pic">
                      <img :src="item.image" alt="">
                  </div>
                  <div class="msg">
                    <p class="scrip">{{item.goods_name}}</p>
                      <span class="goodsPrice">￥{{item.sell_price}}</span>
                      <span class="popular"><img src="/static/img/fire.png"><span>{{item.popularity}}</span></span>
                  </div>
                  </a>
              </li>
          </ul>
          <div v-else class="foundNot">
              <div v-if="loading">
                  <img src="/static/img/notFound.png" alt="">
              </div>
          </div>
      </van-tab>-->
      <van-tab title="推荐指数">
        <ul class="goodsList" v-if="goodList.length>0">
          <li class="goods" v-for="(item,index) in goodList" :key="index">
            <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
              <div class="pic">
                <img :src="item.image" alt="">
              </div>
              <div class="msg">
                <p class="scrip">{{item.goods_name}}</p>
                <span class="goodsPrice">￥{{item.sell_price}}</span>
                <span class="popular"><img src="/static/img/fire.png"><span>{{item.popularity}}</span></span>
              </div>
            </a>
          </li>
        </ul>
        <div v-else class="foundNot">
          <div v-if="loading">
            <img src="/static/img/notFound.png" alt="">
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>

  <!-- </div> -->
</template>
<script>
  import request from '@/actions/request.js'
  export default {
    name: "specialArea",
    components: {
    },
    data() {
      return {
        scrollTop:0,
        active:0,
        page:1,
        searchContent:'',
        list:1,
        type:1,
        data:{},
        goodList:[],
        loading:false,
        allPage:1,
        category_id:'',
        raise:true,
        types:''
      }
    },
    onShow(){
      this.goodList = [];
    },
    onPageScroll(event) {
      this.scrollTop=event.scrollTop
    },
    onReachBottom() {
      if(this.page<this.allPage){
        this.page++;
        request.allGoods('api/shop/allGoods','post',{type:this.type,page:this.page,category_id:this.category_id},{},true,this);
      }else{

      }
    },
    onLoad(){
      this.category_id = this.$root.$mp.query.category_id;
    },
    methods:{
      changeList(){
        if (this.types == 2){
          this.raise = !this.raise;
          console.log(this.raise);
          if (this.raise){
            this.goodList = [];
            request.allGoods('api/shop/allGoods','post',{type:3,page:this.page,category_id:this.category_id},{},true,this);
          } else{
            this.goodList = [];
            request.allGoods('api/shop/allGoods','post',{type:4,page:this.page,category_id:this.category_id},{},true,this);
          };
        }
      },
      priceList(){

      },
      activeChange (e) {
        let index=e.mp.detail.index;
        this.page=1;
        this.data.list=[];
        this.type=index+1;
        this.goodList=[];
        this.types  = index;
        console.log(index);
        if (index === 2){

        }else if (index === 3){
          this.type = 5;
          request.allGoods('api/shop/allGoods','post',{type:this.type,page:this.page,category_id:this.category_id},{},true,this);
        } else{
          request.allGoods('api/shop/allGoods','post',{type:this.type,page:this.page,category_id:this.category_id},{},true,this);
        };

      },
    },
    mounted() {
      request.allGoods('api/shop/allGoods','post',{type:this.type,page:this.page,category_id:this.category_id},{},true,this);
    },
  }
</script>

<style scoped lang="scss">
  .main-wrap{
    min-height: 100vh;
  }
  .foundNot{
    text-align: center;
    padding-top: 90px;
    img{
      width: 120px;
      margin-bottom: 20px;
    }
  }
  .noteType{
    display: flex;
    justify-content: space-between;
    padding: 0 4vw;
    margin: 10px 0;
    .noteTypes:first-child{
      color: #FF4C50;

    }
    ul{
      display: flex;
      justify-content: space-between;
      width: 60px;
      font-size:12px;
    }
    span{
      font-size: 12px;
    }
  }
  .goodsType{
    display: flex;
    justify-content: space-around;
    font-size:12px;
    width: 100%;
    flex-wrap: wrap;
    margin: 10px 0;
    height: 50px;
    position: absolute;
    top: 0;
    z-index: 2;
    .goodsTypes:first-child{
      color:#FF4C50;
    }
  }
  .van-tabs__content{
    margin-top: 10px !important;
  }
  .noteList{
    display:flex;
    justify-content: space-between;
    padding: 4vw 4vw;
    flex-wrap: wrap;
    background: #f5f5f5;
    .notes{
      width:44vw;
      border-radius: 8px;
      background:#ffffff;
      .pic{
        height: 44vw;
        width: 44vw;
        line-height: 44vw;
        overflow: hidden;
        img{
          width: 100%;

        }
      }
      .headIcon{
        width:25px;
        height: 25px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
        img{
          width: 100%;

        }
      }
      .msg{
        padding:8px 12px;
        .scrip{
          font-size: 14px;
          -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
          height: 11vw;
          overflow: hidden;
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }

      .userName{
        vertical-align: middle;
        font-size:13px;
        color:#333333;
      }
      .title{
        width: 100%;
        height: 45px;
        font-size: 13px;
        color: #333333;
        line-height: 22px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        // padding: 0 12px;
      }
      .popular{
        float:right;
        img{
          width:16px;
          vertical-align: middle;
          margin-right: 5px;
        }
        span{
          font-size: 12px;
          vertical-align: middle;
        }
      }
    }
  }
  .goodsList{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 4vw 4vw;
    background: #f5f5f5;
    .goods{
      width:44vw;
      border-radius: 8px;
      background:#ffffff;
      margin-bottom: 15px;
      .pic{
        height: 44vw;
        width: 44vw;
        line-height: 44vw;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .headIcon{
        width:25px;
        height: 25px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
        img{
          width: 100%;

        }
      }
      .msg{
        padding:8px 12px;
        .scrip{
          font-size: 14px;
          -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
          height: 11vw;
          overflow: hidden;
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
      .goodsPrice{
        vertical-align: middle;
        font-size:14px;
        color:#FF4C50;
      }
      .title{
        width: 100%;
        height: 45px;
        font-size: 13px;
        color: #333333;
        line-height: 22px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        // padding: 0 12px;
      }
      .popular{
        float:right;
        img{
          width:13px;
          height: 13px;
          vertical-align: middle;
          margin-right: 2px;
        }
        span{
          font-size: 12px;
          color: #ff4081;
          vertical-align: middle;
        }
      }
    }
  }
  .userList{
    padding: 12px 4vw;
    background: #f5f5f5;
    li{
      border-radius: 8px;
      background:#ffffff;
      padding:12px 22px 12px 12px;
    }
    .headIcon{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
      img{
        width: 100%;
      }

    }
    .userName{
      font-size: 14px;
    }
    .userId{
      color:#666666;
      font-size: 12px;
    }
    .contentBtn{
      height: 24px;
      width: 60px;
      text-align: center;
      line-height: 24px;
      background: #FF4C50;
      color: #ffffff;
      border-radius: 50px;
      vertical-align: middle;
    }
    .contentBtn1{
      height: 24px;
      width: 60px;
      text-align: center;
      line-height: 24px;
      background: #CCCCCC;
      color: #ffffff;
      border-radius: 50px;
      vertical-align: middle;
    }
    .note{
      line-height: 2em;
      color: #333333;
    }
  }

</style>
